<template>
    <div ref="box">
        <div class="divfixed" ref="tabheight">
            <div class="circlesTab">
                <div class="circlesTabBox">
                    <span class="fl fontSize32" v-for="(item,index) in tab" :class="[index == 1 ? 'textC': '',index == 2 ? 'textR': '',tabIndex == index ? 'active' : '']" :key="index" @click="type(index)">{{item}}</span>
                </div>
            </div>
        </div>
        <v-loadmore :top-method="loadTop" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
        <div class="focusTop" v-infinite-scroll = "loadMores" infinite-scroll-disabled = 'loading' infinite-scroll-distance = '30'>
            <div class="imgBoxDiv imgBoxDivBottom" ref="elememt" v-for="(item,index) in tabList" :key="index">
                <div class="nameBox focusDw" @click="homeLink(item)">
                    <p class="fl pOne">
                        <img :src="item.imagePath?item.imagePath:$defaultSetting.defaultPortrait" alt="">
                    </p>
                    <p class="fl ptt">
                        <font class="provenance fontSize26 color717070">
                            <em class="fl color000" style="max-width: 2.1rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.nickname}}</em> 
                            <img class="fl" v-show="item.certStatus == 1" src="../../assets/img/v.png" width="20" />
                            <em class="fl" v-show="item.certStatus == 1" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 1.5rem;">{{item.certName}}</em> 
                        </font>
                        <font class="provenanceTiem fontSize22"><em class="color5b5e5e">{{item.createTime | dateServer}}</em></font>
                    </p>
                    <p class="fr delect textC fontSize28" v-if="tabIndex == 0" @click.stop="quxiaoGz(item.id,item.focusStatus)">
                        <img src="../../assets/img/del.png" alt="">
                    </p>
                    <p class="fr subscribe" v-if="tabIndex == 1 && userId != item.pubUserId" :class="[item.focusStatus == 0 ? 'colorFFF' : 'textC backgroundedeeee color5b5e5e']" @click.stop="addOn(item.pubUserId,item.focusStatus)">
                        <span class="dot fl" v-if="item.focusStatus == 0"></span>
                        {{item.focusStatus == 0 ? '關註' : '已關註'}}
                    </p>
                    <p class="fr subscribe colorFFF textC" v-if="userId == item.pubUserId" @click.stop="delectDetail(index,item.id,item.pubUserId)">
                        <span class="dot fl"></span>
                        删除
                    </p>
                    <div class="cancel" v-show="guanzhuBox && item.id == guanzhuBoxId">
                        <div class="jiao">
                            <span><i></i></span>
                        </div>
                        <p class="cancelTit fontSize28 textC">選擇理由，精準屏蔽</p>
                        <p class="cancelContent fontSize36">
                            <span class="fl textC" @click.stop="hideIndex(index,item.id)">不感興趣</span>
                            <span class="fl textC" @click.stop="hideIndex(index,item.id)">内容太水</span>
                        </p>
                        <p class="cancelFocus">
                            <font class="fontSize36 colord31518 textR fl" @click.stop="addOn(item.pubUserId,item.focusStatus)">取消關註</font>
                            <em class="fl fontSize28">{{item.nickname}}   {{item.certName}}</em>
                        </p>
                    </div>
                </div>
                <div class="focusContent fontSize28" @click="detailLink(item)" v-if="item.pubType == 1" v-html="$interceptionMessage(item.content)">
                    <!-- {{item.content | contentNum}} -->
                </div>
                <div class="focusContent fontSize28" @click="detailLink(item)" v-else-if="item.pubType == 2">
                    {{item.title | titleFile}}
                </div>
                <div class="focusContent fontSize28 jiacu" @click="detailLink(item)" v-else>
                    {{item.content}}
                </div>
                <div class="focusContent fontSize28 pubTypeThree" @click="detailLink(item)" v-if="item.pubType == 3">
                    <em>{{$stringMessage(item.forwardContent)[0]}}</em>{{$stringMessage(item.forwardContent)[1] | contentNum}}
                </div>
                <div class="divImgOne" v-if="item.pubType == 2">
                    <p v-for="(imgItme,imgIndex) in item.contentImage" :key="imgIndex" @click="imgbig(imgIndex,item.contentImage)">
                        <img :src="imgItme" alt="">
                    </p>
                </div>
                <div class="divImgOne" v-if="item.contentImage && item.contentImage.length == 1 && (item.pubType == 1 || item.pubType == 3)">
                    <p v-for="(imgItme,imgIndex) in item.contentImage" :key="imgIndex" @click="imgbig(imgIndex,item.contentImage)">
                        <img :src="imgItme" alt="">
                    </p>
                </div>
                <div class="focusImgBox textC" v-if="item.contentImage && item.contentImage.length == 2 && (item.pubType == 1 || item.pubType == 3)">
                    <p class="fl twop" v-for="(imgItme,imgIndex) in item.contentImage" :key="imgIndex" :style="[imgIndex%3==0 ? '' : marginLeft,imgIndex>2 ? marginTop : '']" @click="imgbig(imgIndex,item.contentImage)">
                        <img :src="$imgItmeFiler(imgItme)" alt="">
                    </p>
                </div>
                <div class="focusImgBox textC clearfix" v-if="item.contentImage && item.contentImage.length > 2 && (item.pubType == 1 || item.pubType == 3)">
                    <p class="fl threep" v-for="(imgItme,imgIndex) in item.contentImage" :key="imgIndex" :style="[imgIndex%3==0 ? '' : marginLeft,imgIndex>2 ? marginTop : '']" @click="imgbig(imgIndex,item.contentImage)">
                        <img :src="$imgItmeFiler(imgItme)" alt="">
                    </p>
                </div>   
                <div class="focusContent fontSize28" @click="detailLink(item)" v-if="item.pubType == 2">
                    {{item.content | contentNum}}
                </div>
                <div class="focusHe" @click="detailLink(item)">
                    <div class="address fontSize26 color5b5e5e">
                        <img v-show="item.addr != null" src="../../assets/img/address.png" class="fl" alt="">
                        <font v-show="item.addr != null" class="reading">{{item.addr}}</font>
                        <font>閱讀</font>
                        <font>{{item.readCount}}</font>
                    </div>
                    <div class="chpl">
                        <span class="fl" @click.stop="forwarding(item)"><img src="../../assets/img/xh2.png" alt="">{{item.transpondCount}}</span>
                        <span class="fl"><img src="../../assets/img/pl2.png" alt="">{{item.comCount}}</span>
                        <span class="fl textR" @click.stop="addPraise(item)">
                            <font class="fr">{{item.praiseCount}}</font>
                            <img v-if="item.exiPraise" src="../../assets/img/011.png" alt="">
                            <img v-else src="../../assets/img/022.png" alt="">
                        </span>
                    </div>
                </div>
            </div>
            <p v-if='loadingDom' class='loading'>
                没有更多数据
            </p>
        </div>
        </v-loadmore>
    </div>
</template>
<script>
import apiCircle from '../../api/circle'
import apiDetail from '../../api/detail'
import {Loadmore,MessageBox,Toast,InfiniteScroll} from 'mint-ui'
export default {
    data(){
        return{
            isDivfixed:true,
            tab:['關註','學海','同學'],
            tabIndex:sessionStorage.getItem('tabIndex'),
            pageSize: 10,
            pageNum: 1,
            userId: this.$route.query.userId,
            tab1:this.$route.query.tab,
            tabList: [],
            pages: '',
            // 切换内容
            allLoaded: false,
            marginLeft:{
                marginLeft:'2%'
            },
            marginTop:{
                marginTop:'1%'
            },
            guanzhuBox:false,
            guanzhuBoxId: 0,
            defaultIndex:0,
            touristsId:'',
            loading: true, //为true时不会触发加载更多，false可以触发
            loadingDom: false,
        }
    },
    components: {
        'v-loadmore':Loadmore,
    },
    watch:{
    },
    created(){
        this.circleList(1)
        window.appLoginId = this.appLoginId
    },
    mounted(){
    },
    methods:{
        // 接受正常登陆之后的userId
        appLoginId(userId){
            this.userId = userId
            this.tab1 = ''
        },
        // 跳转登陆
        loginHtml(){
            if(this.$isAndroid){
                window.android.isUserPermissions()
            }else if(this.$isiOS){
                window.webkit.messageHandlers.isUserPermissions.postMessage('')
            }
        },
        // 跳转到个人空间
        homeLink(item){
            if(this.$isAndroid){
                window.android.startSpace(window.location.origin + '/h5ext/#/home?userId='+this.userId+'&homeId='+item.pubUserId+'&tab='+this.tab1)
            }else if(this.$isiOS){
                window.webkit.messageHandlers.startSpace.postMessage(window.location.origin + '/h5ext/#/home?userId='+this.userId+'&homeId='+item.pubUserId+'&tab='+this.tab1)
            }
        },
        // 跳转到详情
        detailLink(item){
            if(this.$isAndroid){
                window.android.detailHref(window.location.origin + '/h5ext/#/detail?id=' +item.id+'&userId='+this.userId+'&tab='+this.tab1)
            }else if(this.$isiOS){
                window.webkit.messageHandlers.detailHref.postMessage(window.location.origin + '/h5ext/#/detail?id=' +item.id+'&userId='+this.userId+'&tab='+this.tab1)
            }
        },
        //  顶部刷新
        loadTop(){
            this.$refs.loadmore.onTopLoaded()
            this.pageNum = 1
            this.circleList(2)
        },
        // 切换
        type(id){
            document.documentElement.scrollTop = document.body.scrollTop = 0
            this.tabList = []
            this.pageNum = 1
            this.tabIndex = id
            sessionStorage.setItem('tabIndex',id)
            if(this.tab1 == 4 && id!=1){
                this.loginHtml()
            }else{
               this.circleList(1)
            }
            this.guanzhuBox = false
            this.guanzhuBoxId = 0
        },
        // 圈子列表
        circleList(pull){
            let parmes = {pageSize: 10,pageNum: this.pageNum,userId: this.userId,tab:(parseInt(this.tabIndex) + 1)}
            apiCircle.enventList(parmes).then(data=>{
                if(data.body.returnMsg == "success" && data.body.data){
                    this.pages = data.body.data.pages
                    for(let i=0;i<data.body.data.list.length;i++){
                        if(data.body.data.list[i].contentImage){
                            data.body.data.list[i].contentImage = data.body.data.list[i].contentImage.split(',')
                        }
                        if(pull == 1){
                            this.tabList.push(data.body.data.list[i])
                            this.loading = false;
                        }
                    }
                    if(pull == 2){
                        this.tabList = data.body.data.list
                    }
                }
            })
        },
        //分页加载更多
        loadMores() {
            this.pageNum++
            this.loading = true
            if(this.pageNum <= this.pages){
                this.circleList(1)
            }else{
                this.loadingDom = true
            }
        },
        // 取消关注框
        quxiaoGz(id,focusStatus){
            if(focusStatus == 1){
                this.guanzhuBox = !this.guanzhuBox
                this.guanzhuBoxId = id
            }
        },
        // 详细操作   订阅
        addOn(pubUserId,focusStatus){
            this.guanzhuBox = false
            if(this.tab1 == 4){
                this.loginHtml()
            }else{
                if(focusStatus != 0){
                    MessageBox.confirm('您确定要取消关注吗?').then(action => {
                        this.guanzhu('determine',pubUserId,focusStatus)
                    })
                }else{
                    this.guanzhu('cancel',pubUserId,focusStatus)
                } 
            }
        },
        guanzhu(type,pubUserId,focusStatus){
            let parms = {userId:this.userId ? this.userId : this.touristsId,attentionId:pubUserId,focusStatus:focusStatus}
            apiDetail.addFocus(parms).then(data => {
                if(data.body.returnMsg == 'success'){
                    this.tabList.forEach(t => {
                        if(t.pubUserId == pubUserId){
                            t.focusStatus = data.body.data.focusStatus
                        }
                    })
                    if(type == 'determine'){
                        Toast('操作成功')
                    }
                }
            })
        },
        // 删除自己发布的动态
        delectDetail(index,id,pubUserId){
            MessageBox.confirm('您确定要删除动态吗?').then(action => {
                apiCircle.del({id:id,pubUserId:pubUserId}).then(data => {
                    if(data.body.returnMsg == 'success'){
                        this.tabList.splice(index,1)
                        Toast('删除成功')
                    }
                })
            })
        },
        // 点赞
        addPraise(item){
            let parmes = {userId:this.userId,newsId:item.id,newsType:11}
            apiCircle.enventPraise(parmes).then(data => {
                if(data.body.returnMsg == "success"){
                    item.exiPraise = !item.exiPraise
                    item.praiseCount++
                }
            })
        },
        // 转发
        forwarding(item){
            if(this.userId == item.pubUserId){
                Toast('您不能转发自己')
                return false
            }
            if(item.dynamicId && item.forwoardUserId && item.forwoardUserType){
                if(this.$isAndroid){
                    window.android.forWard(item.contentImage ? item.contentImage.join(',') : '',item.content,item.forwoardUserId,item.forwoardUserType,item.nickname,item.dynamicId)
                }else if(this.$isiOS){
                    let forWardString = {
                        'imgArray':item.contentImage ? item.contentImage.join(',') : '',
                        'title':item.content,
                        'forwoardUserId':item.forwoardUserId,
                        'forwoardUserType':item.forwoardUserType,
                        'nickname':item.nickname,
                        'dynamicId':item.dynamicId
                    }
                    window.webkit.messageHandlers.forWard.postMessage(JSON.stringify(forWardString))
                }
            }else{
                if(this.$isAndroid){
                    window.android.forWard(item.contentImage ? item.contentImage.join(',') : '',item.content,item.pubUserId,item.pubUserType,item.nickname,item.id)
                }else if(this.$isiOS){
                    let forWardString = {
                        'imgArray':item.contentImage ? item.contentImage.join(',') : '',
                        'title':item.content,
                        'pubUserId':item.pubUserId,
                        'pubUserType':item.pubUserType,
                        'nickname':item.nickname,
                        'dynamicId':item.id
                    }
                    window.webkit.messageHandlers.forWard.postMessage(JSON.stringify(forWardString))
                }
            }
        },
        // 点击图片放大
        imgbig(index,contentImage){
            if(this.$isAndroid){
                window.android.getBigImagePaths(index,contentImage.join(','))
            }else if(this.$isiOS){
                let stringImg = index +','+ contentImage.join(',')
                window.webkit.messageHandlers.getBigImagePaths.postMessage(stringImg)
            }
        },
        // 删除关注里面一条数据
        hideIndex(index,id){
            this.guanzhuBox = !this.guanzhuBox
            MessageBox.confirm('您确定要删除吗?').then(action => {
                apiCircle.hide({id:id,userId:this.userId}).then(data => {
                    if(data.body.returnMsg == 'success'){
                        this.tabList.splice(index,1)
                        Toast('删除成功')
                    }
                })
            })
            // .catch(data=>{
            //     if(data == 'cancel'){
                   
            //     }
            // }) 
        }
    },
    filters:{
        contentNum(val){
            if(val !=null && val.length>80){
                return val.substr(0,80)+'...'
            }else{
                return val
            }
        },
        titleFile(val){
            if(val.length>20){
                return val.substr(0,20)+''
            }else{
                return val
            }
        }
    }
}
</script>
<style scoped>
.imgItmeBackground{
    height: 4rem;
    width: 100%;
    background-size: 100% 100%;
    display: block;
}
.pOne img{
    height: 100%;
}
</style>

